<!-- 页面 -->
<template>
    <div class="shou">
        <van-sticky class="shang" :offset-top="0">
            <div class="shang1">
                <van-field style="width: 80%; float: left; border-radius: 50px 50px 50px 50px;" v-model="iid"
                    placeholder="请输入商家或商品名称" />
                <van-button round type="info" style="">搜索</van-button>
            </div>
        </van-sticky>
        <van-row>
            <van-col style="width: 20%; text-align: center;" span="4.5" v-for="(item, index) in list" :key="index">
                <img style="width: 70%; margin-top: 10px;" :src=item.url alt="">
                <p>{{ item.name }}</p>
            </van-col>
        </van-row>
        <van-swipe style="width: 95%; margin: auto; border-radius: 15px;" class="my-swipe" :autoplay="3000"
            indicator-color="white">
            <van-swipe-item v-for="(item, index) in lun" :key="index">
                <img style="width: 100%;" :src=item.picUrl alt="">
            </van-swipe-item>
        </van-swipe>

        <van-row gutter="20">
            <van-col span="6" v-for="(item, index) in lan" :key="index"><span style="color: black; background:#ffffff; ">{{
                item.name }}</span> </van-col>
        </van-row> <br>

        <van-row v-for="(item,index) in shuju.module_list" :key="index" @click="add()">
            <van-col span="8">
                <img style="width: 100%;" :src=item.string_data.poi_pic alt="">
            </van-col>
            <van-col span="16">
                <b>{{ item.string_data.poi_name }}</b>
                <p>
                    <span style="color: orange;">{{ item.string_data.wm_poi_score }}</span>   
                    <small>{{ item.string_data.month_sales_tip }}</small>
                    <small>{{ item.string_data.avg_price_tip }}</small>
                    <small style="color: orangered; position: absolute; right: 10px;">美团转送</small>
                </p>
                <p>  
                    <small>{{ item.string_data.min_price_tip }}</small>
                    <small>{{ item.string_data.shipping_fee_tip }}</small>
                    <small style=" position: absolute; right: 10px;">{{item.string_data.delivery_time_tip}}{{item.string_data.distance}}</small>
                </p>
                <p>
                    <span style="color: red; border:1px dotted black; margin-left: 10px;" v-for="(item1,index1) in item.string_data.poi_tags" :key="index1"> {{ item1.sub_tags[0].text }}</span>
                </p>
            </van-col>
        </van-row>
        <xia :active1="active1"></xia>
    </div>
</template>
<!-- vue -->
<script>
import xia from '@/components/xia.vue'
export default {
    components:{
        xia
    },
    data() {
        return {
            // 声明的属性
            iid: '',
            list: [],
            lun: [],
            lan: [
                { name: '点评高分' },
                { name: '优惠商家' },
                { name: '满减优惠' },
                { name: '品牌商家' },
            ],
            shuju: [],
            active1:0
        }
    },
    //生命周期函数
    mounted() {
        this.$axios.get('categoryList.json').then(res => {
            this.list = res.data
        })
        this.$axios.get('swiper.json').then(res => {
            this.lun = res.data
        })

        this.$axios.get('goodslist.json').then(res => {
            this.shuju = res.data
            console.log(this.shuju);

        })

    },
    // 调用方法
    methods: {
        add(){
            this.$router.push('/lie')
        }
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style>
.shou {
    width: 100%;
    height: 100%;
    background: #f8f8f8;
}

.shou .shang {
    width: 100%;
    height: 70px;
    background: #ffce34;
}

.shou .shang .shang1 {
    width: 95%;
    height: 40px;
    /* background: white; */
    border-radius: 50px 50px 50px 50px;
    position: absolute;
    top: 20px;
    left: 2%;
}
</style>